<template>
    <view class="RemoteEquipment">
        <base-navbar :title="title"> </base-navbar>
        <view class="remote">
            <!-- 顶部区域 -->

            <!-- 内容区域 -->
            <view class="remote_content">
                <!-- 内容区域顶部 -->
                <!-- <view class="content_top"> </view> -->

                <view class="remote_top">

                    <view class="remote_txtt">{{ vPointName }}名称：{{ hotleName ? hotleName : "" }}</view>
                    <view>{{ vPointName }}账号：{{ use_login ? use_login : "" }}</view>

                </view>
                <!-- 内容区域扫码部分 -->
                <view class="content_center">
                    <view @click="sweep()">
                        <view class="bilud">
                            <img src="./../static/img/sweep.png" alt="" />
                        </view>
                        <view class="center_2">扫一扫添加设备</view>
                    </view>
                </view>

                <!-- 内容区域内容咧白哦部分 -->
                <block v-if="!errors">

                    <view class="content_main" v-if="dataList.length > 0">
                        <view v-for="(item, i) in dataList" :key="i">
                            <view class="content_lt">
                                {{ numm(i) }}
                            </view>
                            <view class="content_icon" @click="deletData(item)">
                                <u-icon name="close-circle-fill" color="red" size="40"></u-icon>
                            </view>
                            <view class="comten_mb">系统码：{{ item.vCode || '未绑定' }}</view>
                            <view>设备码：{{ item.device_sn }}</view>
                        </view>
                    </view>
                    <view class="content_sweep" v-else>
                        <view>
                            请点击扫一扫添加设备
                        </view>
                    </view>
                </block>
                <block v-else>

                    <view class="content_main">
                        <view v-for="(item, i) in errorDataList" :key="i">
                            <view class="content_lt">
                                {{ numm(i) }}
                            </view>
                            <view class="content_rt" v-if="item.status == 1">
                                <image src="./../static/img/error.png"></image>
                            </view>
                            <view class="comten_mb">系统码：<text :class="item.status == 1 ? 'redt' : 'greent'">
                                    {{ item.vCode || '未绑定' }}
                                </text></view>
                            <view>设备码：<text :class="item.status == 1 ? 'redt' : 'greent'">
                                    {{ item.device_sn }}
                                </text></view>
                        </view>
                    </view>
                </block>
                <!-- 内容区域内容咧白哦部分 -->
                <view class="content_btn" >
                    <view>
                        <BaseButton type="eixt" @onClick="clicke()">批量绑定</BaseButton>
                    </view>
                </view>
            </view>
        </view>


        <BaseProGressList @errorChange="errorChange" :titles="titles" :total="total" />
    </view>
</template>
  
<script>
import BaseNavbar from "../../components/base/BaseNavbar.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import { getUrlParams, getUrlDynamicData } from "@/common/tools/utils.js";
import BaseProGressList from "@/components/base/BaseProGressList.vue";
export default {
    components: {
        BaseNavbar,
        BaseButton,
        BaseProGressList,

    },
    data() {
        return {
            title: "批量绑定",
            hotleName: '小二',
            use_login: '13588',
            dataList: [
            ],
            systematicCode: '',
            hotel_id: '',
            mid: '',
            room_num: '',
            errorDataList: [],
            errors: false


        };
    },
    computed: {
        total() {
            if (this.dataList.length > 0) {
                return this.dataList.length;
            }
            return 0
        },
    },
    methods: {
        /* 防抖 */
        setTime() {
            let timestamp = new Date().valueOf();
            if (timestamp - this.lastOrderTime < 5000) {
                uni.showToast({
                    title: `其他指令正在执行请等${5-((timestamp - this.lastOrderTime)/1000).toFixed(0)}秒后进行其他操作`,
                    icon: "none",
                    duration: 1500,
                });
                console.log('进来了节流')
                // this.lastOrderTime = timestamp;
                return false;
            } else {
                this.lastOrderTime = timestamp;
                console.log('时间大于10秒')
                return true;
            }
        },
        numm(i) {
            let a
            if (i < 9) {
                a = '0' + (i + 1)
            } else {
                a = i + 1
            }
            return a
        },
        /* 点击删除 */
        deletData(items) {
            let i = this.dataList.indexOf((items))
            console.log('是否找到', items, i)
            this.dataList.splice(i, 1)
        },
        /* 获取信息 */
        async getUMDdetail({ device_sn, mid, vscode }) {
            let data = {
                device_sn,
                vscode,
                mid,
            };
            console.log('发送请求获取详细信息', data)
            let rtnData = await this.$u.api.getUMDetail({ ...data });

            if (rtnData) {
                let parames = {
                    vscode: rtnData.vCode,
                    device_sn: rtnData.device_sn,
                    room_num: rtnData.room_num,
                    mid: rtnData.id
                }
                let a = -1
                if (this.dataList.length > 0) {
                    a = this.dataList.findIndex((item) => item.device_sn == parames.device_sn)
                    console.log('是否重复添加', data, a)
                }
                if (a == -1) {

                    this.dataList.push(parames)
                } else {
                    this.isShowErr('已经添加过该设备')
                }


                //售袋机系统，此时需要额外保存地址信息和上传的图片信息


            } else {
                if (this.fromData == "home") this.isShowErr("设备编号不正确~", 1);
            }
        },
        /*  扫码 */
        sweep() {
            uni.scanCode({
                success: async ({ result, scanType, charSet, path }) => {
                    console.log(result);
                    let systematicCode
                    let vscode = ''
                    let device_sn = ''
                    let mid = ''
                    if (result.includes("vscode")) {
                        systematicCode = getUrlParams(result, "vscode");
                        vscode = systematicCode

                    } else if (result.includes("device_sn")) {
                        systematicCode = getUrlDynamicData(result, "device_sn");
                        device_sn = systematicCode
                    } else if (result.includes("mid")) {
                        systematicCode = getUrlDynamicData(result, "mid");
                        mid = systematicCode
                    } else {
                        return this.promptError();
                    }

                    // let data = {
                    //     mid:'1',
                    //     device_sn:systematicCode
                    // }
                    // this.dataList.push(data)

                    let data = {
                        vscode,
                        device_sn,
                        mid
                    }

                    this.getUMDdetail({ ...data })
                    console.log("扫描二位码解析的信息", systematicCode,)

                },
                fail: (error) => { },
            });
        },
        //二维码错误提示
        promptError() {
            this.isShowErr("请扫码正确的二维码,二维码信息");
        },
        clicke() {
            if (this.dataList.length < 1) {
                return this.isShowErr('请添加设备再操作')
            } else if (this.errors) {
                return this.isShowErr('您已经进行过该操作,请返回重新操作')
            }
            this.isShowTwo("", 1);
            let data = {
                hotel_id: this.hotel_id,
            };
            const requestCallback = async (data) => {
                return this.$u.api.bindHotel(data);
            };
            this.$emit('customEvent', this.dataList, data, 3000, requestCallback);
            // uni.setStorageSync("bindId_key", data);

        },
        /* 错误返回 */
        errorChange(list) {

            console.log('返回错误列表', list)
            if (list.length > 0) {

                for (let i = 0; i < this.dataList.length; i++) {
                    let a = list.findIndex((item)=>item.device_sn==this.dataList[i].device_sn)
                    console.log('是否找到对应折欸',a)
                    let data = {}
                    if (a != -1) {
                        data = {
                            ...this.dataList[i],
                            status: 1
                        }
                    } else {
                        data = {
                            ...this.dataList[i]
                        }
                    }
                    this.errorDataList.push(data)

                }
            } else {
                this.errorDataList = this.dataList
            }
            console.log('错误列表修改后信息', this.errorDataList)
            this.errors = true
        }

    },
    onLoad(opt) {
        console.log(opt, ">>>>>>>>>>>>>>>>>");
        if (opt?.from) {
            this.fromData = opt.from;
            if (opt.from == "device") {
                // 设备绑定来的
                this.hotel_id = opt?.hotel_id;
                // this.mid = opt?.mid;
                console.log('传递过来的信息', this.hotel_id,)
            }
        }

    },
    onShow() {
        let pages = getCurrentPages();
        let currPage = pages[pages.length - 1]; // 当前页
        console.log('是否要刷新', currPage.data.isDoRefresh)
        if (currPage.data.isDoRefresh == true) {
            // 是否刷新
            this.isShowTwo("", 1);
        }
    },
};
</script>
<style lang="scss">
page {
    background-color: $pageBgColor;
}
</style>
<style lang="scss" scoped>
.RemoteEquipment {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: auto;

    #specialEffect {
        transition: all 1.2ms ease-in;
    }

    #specialEffect:hover {
        background: linear-gradient(100deg, #46a1ff 0%, rgb(255, 91, 91) 100%);

    }

    .remote {
        width: 100%;
        height: 100%;
        padding: 10rpx 25rpx 0rpx 25rpx;
        box-sizing: border-box;

        .remote_top {
            width: 85%;
            margin: auto;
            color: #666;
            display: flex;
            margin-top: 20rpx;
            border-radius: 15rpx;
            flex-direction: column;
            text-align: center;
            font-size: 28rpx;
            padding: 15rpx 0;
            // border: 1px solid #000;
            // background-color: #e7e7e7;



        }

        .content_center {

            // border: 1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;

            >view {
                font-size: 28rpx;
                font-weight: bolder;
                // border: 1px solid #000;
                text-align: center;
            }
        }

        .remote_txtt {
            margin-bottom: 10rpx;
        }

        .content_sweep {
            margin: 20rpx 0;
            // border: 1px solid #000;
            height: 550rpx;
            padding: 15rpx;
            display: flex;
            text-align: center;
            // flex-wrap: wrap;
            // overflow-y: auto;
            justify-content: center;

            // align-items: center;
            // border: 1px solid #000;
            >view {
                // border: 1px solid #000;
                // width: 500rpx;
                // height: 100rpx;


            }
        }

        .content_main {
            margin: 20rpx 0;
            // border: 1px solid #000;
            height: 550rpx;
            padding: 15rpx;
            overflow: scroll;
            display: flex;
            flex-wrap: wrap;
            // overflow-y: auto;
            justify-content: space-between;
            align-content: flex-start;

            >view {
                height: 80rpx;
                border-radius: 15rpx;
                // flex:0 1 0;
                width: 330rpx;
                margin: 10rpx 0;
                // border: 1px solid #000;
                background-color: $pageBgColor;
                padding: 10rpx 10rpx;
                padding-left: 25rpx;
                font-size: 22rpx;
                position: relative;

                .content_icon {
                    position: absolute;
                    right: -7px;
                    top: -8px;
                }

                .content_lt {
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    background-color: red;
                    // border: 1px solid #000;
                    font-size: 15rpx;
                    width: 40rpx;
                    height: 40rpx;
                    padding: 5rpx 5rpx;
                    color: white;

                    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);

                }

                .content_rt {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    // background-color: red;
                    // border: 1px solid #000;
                    font-size: 13rpx;
                    width: 120rpx;
                    height: 80rpx;
                    padding-left: 15rpx;
                    padding-top: 5rpx;
                    color: white;

                    // clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 0);
                    image {
                        width: 100%;
                        height: 100%;
                    }

                }

                .greent {
                    color: $themeComColor;
                }

                .greenb {
                    background-color: $themeComColor;
                    color: white;
                }

                .redt {
                    color: red;
                }

                .redb {
                    background-color: red;
                    color: white;
                }
            }

            .red {
                color: red;
            }

            .bacred {
                width: 25rpx;
                height: 15rpx;
                background-color: red;
                color: white;
                font-size: 15rpx;
            }

            .comten_mb {
                border-bottom: 2rpx solid rgb(219, 219, 219);
            }

        }

        .content_btn {
            margin-top: 25rpx;
            margin-bottom: 45rpx;
        }

        .remote_content {

            width: 100%;
            min-height: 600rpx;
            max-height: auto;
            background: rgb(255, 255, 255);
            z-index: 1;
            border-radius: 20rpx;
            box-shadow: rgba(#333, 20%);
            overflow: hidden;
            margin-top: 15rpx;
            position: relative;

            img {
                width: 300rpx;
                height: 300rpx;
            }
        }

        .remote_txtt {
            font-size: 40rpx;
            font-weight: bolder;
        }


    }

}


.default {
    text-align: center;
    font-size: 26rpx;
}
</style>